<template>
	<div class="layout-pd">
		<section v-show="!showShopCar">
			<el-card shadow="hover">
				<el-form :model="state.param"  label-width="100px">
					<el-row :gutter="35">
						<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
									<el-form-item label="供应商名">
										<el-select v-model="state.param.supplier" placeholder="请选择供应商名" class="w100">
											<el-option v-for="item in state.query.supplierList" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="商品名称">
										<el-input v-model="state.param.name" placeholder="输入商品名称" clearable></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="screenMenu">
							<el-button type="primary" @click="search">
								<SvgIcon name="iconfont icon-biaodan" /> 搜 索
							</el-button>
						</el-col>
					</el-row>
				</el-form>
			</el-card>

			<el-card shadow="hover" class="mt15" v-loading="state.loading">
				<el-table :data="state.tableData" style="width: 100%" @selection-change="handleSelectionChange"> 
					<el-table-column type="selection" width="55" />
					<el-table-column label="ID" prop="cardItemName" />
					<el-table-column label="品牌" prop="cellPrice" />
					<el-table-column label="商品名称" prop="orderPrice" />
					<el-table-column label="类型" prop="cellPrice" />
					<el-table-column label="规格" prop="buyCount"  />
					<el-table-column label="商品售价(元)" prop="buyCount" />
					
				</el-table>

				<section class="mt15">
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-button type="warning"  >添加购物车</el-button>
							<el-button type="success"  @click="openShopCar">查看购物车</el-button>
						</el-col>
					</el-row> 
				</section>
			</el-card>
		
			<CardDialog v-model="cardDialogVisble" :id="state.param.rowId" :title="state.dialogTitle" />
		</section>

		<section v-show="showShopCar">
			<el-card shadow="hover">
				<ShopCar :closeShopCar="closeShopCar" />
			</el-card>
		</section>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref } from 'vue';

import CardDialog from '/@/views/inventory/inventoryQuery/components/CardDialog.vue' 
import ShopCar from './components/ShopCar.vue' 
import type { storeNodeListData, channelListData } from "/@/types/order";

const showShopCar = ref(false)
const state = reactive({
	dialogTitle: '',
	param: {
		supplier: '',
		total: 0,
		pageNum: 1,
		pageSize: 10,
		name: '',
		rowId: 0,
	},
	query: {
		supplierList: [
			{ value: 1, label: '供应商1' },
			{ value: 2, label: '供应商2' },
		],
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格', 
			orderPrice: '销售金额',
			buyCount: '购买人数',
			coverRatio: '客户覆盖率',
			performanceRatio: '业绩占比',
			allRatio: '全款率',
			startTime: '2023-12-22 12:36:54',
			endTime: '2023-12-22 12:36:54', 
			status: '活动状态',
		}
	] as Array<any>,
	multipleSelection: []
		
});

const cardDialogVisble = ref(false)
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]

const search = () => {}

const handleSelectionChange = (val: any) => {
	state.multipleSelection = val
}

const closeShopCar = () => showShopCar.value = false;
const openShopCar = () => showShopCar.value = true;

// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
</style>
